<template>
    <div>
        <p>{{str}}</p>
        <p>{{str2}}</p>
        <button @click="alterBtn">修改str2</button>
    </div>
</template>

<script>
    export default {
        name: "LifeCycle",
        data() {
            return {
                //变量定义区
                str: '生命周期测试',
                str2: null,
                myObj: {
                    test: '1243',
                    awe: {
                        qwerty: 'ewr14'
                    }
                }
            }
        },
        methods: { //方法定义区
            alterBtn() {
                this.str2++;
            }

        },
        beforeCreate() { //预创建钩子
            console.log('预创建钩子--beforeCreate');
            this.str ='qa4e5';
            console.log(this.str);   //控制台报qa4e5
        },
        created() {//已创建钩子
            console.log('已创建钩子--created');
            console.log(this.str); //控制台报 '生命周期测试' ,页面上渲染的还是 生命周期测试
            //实测发现 不管在beforeCreate时给data赋了什么值，在created后仍会按照data里变量声明的值去渲染!!!!
        },

        beforeMount() { //预挂载钩子
            console.log('预挂载钩子--beforeMount');
            console.log(this.str);
            this.str = this.str+'=====';
            console.log(this.str);
            this.str2 = 1234568;
            console.log(this.str2);

        },
        mounted() { //已挂载钩子(最常用,template/render 已被渲染后触发)
            console.log('已挂载钩子--mounted');
            console.log(this.str);
            console.log(this.str2);

        },


        //页面上人为操作后导致的data数据变化,会出发beforeUpdate和updated钩子
        beforeUpdate() {//预更新钩子 (data数据变更前触发)
            console.log('预更新钩子--beforeUpdate');
            console.log(this.str);
            console.log(this.str2);

        },
        updated() {//已更新钩子 (data数据变更后触发)
            console.log('已更新钩子--updated');
            console.log(this.str);
            console.log(this.str2);

        },
        // beforeDestroy 和 destroyed比较适合跳到其他路由后，清掉本组件的数据
        beforeDestroy() { //预销毁钩子 (vm销毁前触发,实测发现跳转到其他页面后,本组件才会触发beforeDestroy)
            console.log('预销毁钩子--beforeDestroy');
            this.str = '';
            this.str2 = null;
            console.log(this.str);
            console.log(this.str2);

        },
        destroyed() { //已销毁钩子(watch/子组件/事件监听等线程销毁后触发)
            console.log('已销毁钩子--destroyed');
            console.log(this.str);
            console.log(this.str2);

        },
        watch: { //监听器 实测发现在mounted后才会执行
            //监听普通变量变化,
            str2(newV, oldV) {
                // do something, 可使用this
                console.log('watch-新值--' + newV);
                console.log('watch-老值--' + oldV);
            },

            //监听json对象变化
            myObj: {
                handler(newV, oldV) {
                    // do something, 可使用this
                    console.log('watch-新值--' + newV);
                    console.log('watch-老值--' + oldV);

                },
                deep: true //深度监听，可监听到对象、数组的变化
            }

        }


    }
</script>

<style scoped>

</style>